<template>
  <div>
    <!-- 搜索框 -->
    <el-card class="box-card card-toubu" shadow="never">
      <div class="text item">
        <i class="el-icon-search"></i>&nbsp;
        <span>筛选搜索</span>
        <br />
        <br />
        <el-form :inline="true" :model="returnGoodsSearch" class="demo-form-inline">
          <el-form-item label="服务单号:">
            <el-input v-model="returnGoodsSearch.id" placeholder="服务单号"></el-input>
          </el-form-item>
          <el-form-item label="收货人:">
            <el-input v-model="returnGoodsSearch.linkman" placeholder="请输入收货人"></el-input>
          </el-form-item>
          <el-form-item label="申请时间:">
            <el-date-picker v-model="returnGoodsSearch.applyTime" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getReturnGoodsList()">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="box-card card-toubu" shadow="never">
      <div class="text item">
        <i class="el-icon-tickets"></i>&nbsp;
        <span>数据列表</span>
      </div>
    </el-card>

    <!-- 表格 -->
    <el-table border :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column prop="id" label="服务单号" width="180"></el-table-column>
      <el-table-column prop="applyTime" label="申请时间" width="180"></el-table-column>
      <el-table-column prop="userAccount" label="用户账号" width="150"></el-table-column>
      <el-table-column label="退款金额" width="130">
        <template slot-scope="scope">
          <a>￥{{(scope.row.returnMoney/100).toFixed(2) }}</a>
        </template>
      </el-table-column>
      <el-table-column prop="linkman" label="联系人" width="150"></el-table-column>
      <el-table-column label="申请状态" width="130">
        <template slot-scope="scope">
          <span v-if="scope.row.status === '0'">待处理</span>
          <span v-if="scope.row.status === '1'">已完成</span>
          <span v-if="scope.row.status === '2'">已拒绝</span>
        </template>
      </el-table-column>
      <el-table-column label="处理时间" width="180">
        <template slot-scope="scope">
          <span v-if="scope.row.disposeTime === null">N/A</span>
          <span v-else>{{scope.row.disposeTime}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="140">
        <template slot-scope="scope">
          <el-button size="mini" @click="chakanxinqin(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-row :gutter="24" style="margin-top: 10px;">
      <el-col :span="12">
        <el-button @click="batchDelete()">批量删除</el-button>
      </el-col>
      <el-col :span="12">
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      tableData: [],
      returnGoodsSearch: {
        id: "",
        linkman: "",
        applyTime: "",
        type: '2'
      },
      currentPage4: 1,
      page: 1,
      size: 10,
      total: 0,
      multipleSelection: ""
    };
  },
  created () {
    this.getReturnManeyList();
  },
  methods: {
    async getReturnManeyList () {
      const { data: res } = await this.$http.post(
        `vi/order/return/order/pageQueryByAll/${this.page}/${this.size}`,
        this.returnGoodsSearch
      );
      this.tableData = res.data.pageUtils.rows;
      console.log(res.data.pageUtils.rows)
      this.total = res.data.pageUtils.total;
    },
    handleSelectionChange (val) {
      this.multipleSelection = "";
      val.forEach(element => {
        this.multipleSelection = this.multipleSelection + element.id + ",";
      });
      this.multipleSelection = this.multipleSelection.substring(
        0,
        this.multipleSelection.length - 1
      );
    },
    handleSizeChange (val) {
      this.size = val;
      this.getReturnManeyList();
    },
    handleCurrentChange (val) {
      this.page = val;
      this.getReturnManeyList();
    },
    chakanxinqin (row) {
      this.$router.push({
        query: {
          id: row.id
        },
        path: "/home/returnManeyItem"
      });

    },
    // 批量删除
    batchDelete () {
      if (this.multipleSelection.length === 0) {
        // 提示信息
        this.$message({
          type: "info",
          message: "请选择要删除的项"
        });
        return;
      }

      this.$confirm("此操作将任务状态改为删除状态, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          // 点击确定的操作(调用接口)
          const { data: res } = await this.$http.delete(
            `vi/order/return/order/batchDelete/${this.multipleSelection}`
          );
          // 提示信息
          this.$message({
            type: "success",
            message: res.message
          });
          this.getReturnManeyList();
        })
        .catch(() => {
          this.$message("取消删除");
        });
    }
  }
};
</script>
<style scoped></style>
